<template>
    <div class="BlogsDraft" >
        <transition name="fade">
            <loading v-if="isLoading"></loading>
        </transition>
        <h1>草稿箱</h1>
        <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
                property="id"
                label="编号"
                width="200">
            </el-table-column>
            <el-table-column
                property="updatedTime"
                label="日期"
                width="350">
            </el-table-column>
            <el-table-column
                property="title"
                label="标题"
                width="410">
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button type="primary" round  @click="$router.push('/AddBlogAdmin')">新建博客</el-button>
            <el-button type="primary" round  @click="moreBlog" v-show="this.showButton">加载更多</el-button>
            <el-button @click="changeBlog" type="success" plain v-bind:disabled="showAdmin">修改</el-button>
            <el-button @click="deleteBlog" type="danger" plain v-bind:disabled="showAdmin">删除</el-button>
            <el-button @click="giveupChoose" type="info" plain v-bind:disabled="showAdmin">取消</el-button>
        </div>
    </div>
</template>

<script>
import Loading from '../components/loading'
export default {
    name: "BlogEdit",
    components:{ Loading  },
    data() {
        return {
            tableData: [],
            currentRow: null,
            showButton:true,
            pageNum:1,
            pageSize:2,
            showAdmin:true,
            isLoading:true,
        }
    },
    methods:{
        /**
         * 预览字数限制
         * @param date
         * @returns {string|*}
         */
        fontNumber (date) {
            const length = date.length
            if (length > 35) {
                var str = ''
                str = date.substring(0, 35) + '......点击查看文章'
                return str
            } else {
                return date
            }
        },
        changeBlog() {
            if(this.currentRow!==null){
                // console.log('修改'+this.currentRow.blogId)
                // console.log(this.currentRow)
                this.$router.push({
                    name:'AddBlogAdminBlogId',
                    params: {
                        // context:this.currentRow.body,
                        blogId:this.currentRow.id
                    }
                })
            }else{
                this.$message({
                    showClose: true,
                    message: '还未选择任何博客',
                    type: 'warning'
                });
            }

        },
        deleteBlog(){
            if(this.currentRow.id!==null){
                this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.delete("/blog/" + this.currentRow.id).then((res) => {
                        console.log(res)
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    setTimeout(function(){
                        location.reload();//可以是一句或是很多句代码，也可以是个函数
                    },1000);//延时1秒
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }else{
                this.$message({
                    showClose: true,
                    message: '还未选择任何博客',
                    type: 'warning'
                });
            }
        },
        giveupChoose(){
            this.currentRow=null
            this.$refs.singleTable.setCurrentRow();
            this.showAdmin=!this.showAdmin
        },
        handleCurrentChange(val) {
            this.currentRow=val
            // console.log(this.currentRow)
            if(this.showAdmin===true){
                this.showAdmin=!this.showAdmin
            }

        },
        moreBlog(){
            this.axios.post('/blog/paging',
                {
                    author:-1,
                    pageIndex:++this.pageNum,
                    pageSize:this.pageSize,
                    status:0,
                    type:-1
                }).then((response) => {
                this.tableData=this.tableData.concat(response.data.data.list)
                if(this.pageNum >= response.data.data.totalPage){
                    // console.log(response.data.data)
                    this.showButton=false;
                }
            })
        },
        getBlogs(){
            return this.axios.post('/blog/paging',
                {
                    author:-1,
                    pageIndex:this.pageNum,
                    pageSize:this.pageSize,
                    status:0,
                    type:-1,
                    top: 0
                })
        },
    },
    created() {
        // console.log("Blllll");
        var me = this;
        this.axios.all([me.getBlogs()])
            .then(me.axios.spread(function(getBlogs){
                me.tableData=getBlogs.data.data.list
                if (getBlogs.data.data.totalPage <= 1) {
                    me.showButton = false
                }
                me.isLoading=false
            }))
    }
}
</script>

<style scoped>
.BlogsDraft{
    margin: 0 auto;
    max-width: 960px;
    text-align: center;
}
@media screen and (max-width: 500px) {
    .el-message {
        min-width: 300px !important;
    }
}
@media screen and (max-width: 500px) {
    .el-message-box{
        width: 300px !important;
    }
}
</style>
